▉ 前言

這裡將利用教程所提供的"Treasure Hunter Game"來直接學習PixiJS中的語法。"Treasure Hunter Game"的程式碼 ---> Click Here !

系統說明：「Living without an aim is like sailing without a compass.--Ruskin」，PixiJS青銅玩家仍卡關於setUp()階段，僅獲得經驗值提昇等級。

▉ 主線任務：setUp( )：製作血條

▍任務說明

在這裡不使用圖片（sprite或是texture之類的），而是直接利用PIXI中的繪圖工具進行繪製，而繪製方式與canvas的API非常相似，所以如果熟悉canvas，那應該能很快速的上手。

▍作法一

//Create the health bar

healthBar = new Container();
healthBar.position.set(app.stage.width - 170, 4)
gameScene.addChild(healthBar);

▍分析一

在【LV. 9】中有提到Container()的概念，而這裡我們會為血條設置一個群組，這個群組叫做healthBar，群組裡的成員會有黑色底層、紅色上層。

healthBar = new Container();

接著為他設置位置

healthBar.position.set(app.stage.width - 170, 4)

最後將他加上遊戲場景上

gameScene.addChild(healthBar)

▍作法二

//Create the black background rectangle

let innerBar = new Graphics();
innerBar.beginFill(0x000000);
innerBar.drawRect(0, 0, 128, 8);
innerBar.endFill();
healthBar.addChild(innerBar);

此作法完成品：（左上角多一條黑色矩形塊）

▍分析二

再來要將血條的底層黑色矩形給完成，而所有形狀的初始化，都是先創造一個PIXI中的Graphics類別的實例

let innerBar = new Graphics();

接著，使用beginFill可以用來填充顏色，而這裡要注意的是他的顏色值跟平常在css的寫法有些不同，這裡用的是16進制的寫法。

（之前有看到別人在stackoverflow的說法，但現在找不到來源了QQ）

• 0x****** is a hexidecimal literal, a number
• #****** is a string, containing a hexidecimal string

但其實就是用0x取代掉#hashtag而已，後面六碼不會有任何影響變化，像是上方範例0x000000即為黑色（跟#000000是一樣的）。

innerBar.beginFill(0x000000);

再來我們要把矩形給畫出來，這裡使用的是drawRect
語法如下，他有四個參數，前兩個x, y是起始點（從哪個點開始畫製）、後兩個width, height是設置此矩形的寬高：

rectangle.drawRect(x, y, width, height);

來看看我們的範例，即為一個從(0,0)開始繪製，寬為128px、高為8px的矩形。要注意的地方是這裡的（0,0）會是在畫布的（app.stage.width - 170, 4）位置，因為我們在後面會將這個innerBar加進healthBar的群組中，所以此時innerBar的位置會相對於healthBar。

innerBar.drawRect(0, 0, 128, 8);

使用了drawRect後，記得要使用endFill給結束繪製

innerBar.endFill();

最後把innerBar加進healthBar的群組中

healthBar.addChild(innerBar);

codepen - 【LV. 13】：範例1

▍作法三

// Create the front red rectangle

let outerBar = new Graphics();
outerBar.beginFill(0xFF3300);
outerBar.drawRect(0, 0, 128, 8);
outerBar.endFill();
healthBar.addChild(outerBar);

healthBar.outer = outerBar;

此作法完成品：（紅色矩形覆蓋住黑色矩形）

▍分析三

作法三皆跟作法二一樣，唯一比較特別的是，這條紅色矩形是會做變化的，當玩家碰到泡泡怪時會被扣血，進而紅色矩形的寬度會減少。

因此這裡我們為healthBar新增一個屬性稱作outer，這樣的用意是為了使程式碼的可讀性更強，我們在往後要減少紅色矩形寬度時，可以用以下寫法去做控制：

healthBar.outer.width = 30;

codepen - 【LV. 13】：範例2

▉ 結語

今天寫得內容主要在血條的製作，提到了PIXI的繪製方法，有別與之前都是創建Sprite或是Texture，寫法與canvas相似，所以不難製作，運用在血條應用上，也可以更自由的操作。

參考資料

• PixiJS 教程中文版
• 中文教程-用PIXI繪製幾何圖形
• 英文教程-Pixi's Graphic Primitives